<template>

	<div>
		<el-form :inline="true" class="demo-form-inline">
			<el-form-item label="用户名">
				<el-input v-model="userName" placeholder="用户名"></el-input>
			</el-form-item>
			<el-form-item label="用户编号">
				<el-input v-model="userId" placeholder="用户编号"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="Search">查询</el-button>
				<el-button type="primary" @click="Reset">重置</el-button>
				<el-button type="primary" @click="handleEdit">新增用户</el-button>
				<el-button type="primary" @click="Lessuser">删除用户</el-button>
			</el-form-item>

			<el-dialog title="新增用户" :visible.sync="dialogFormVisible" width="55%">
				<el-form ref="editForm" :model="editForm" :rules="rules">

					<div class="edit_left">
						<el-form-item label="用户姓名" prop="name">
							<el-input size="small" v-model="editForm.name"></el-input>
						</el-form-item>
						<el-form-item label="性别">
							<el-radio label="男" v-model="editForm.sex">男</el-radio>
							<el-radio label="女" v-model="editForm.sex">女</el-radio>
						</el-form-item>
						<el-form-item label="电子邮件">
							<el-input size="small" v-model="editForm.email"></el-input>
						</el-form-item>
						<el-form-item label="所属部门" prop="demid">

							<div class="block">
								<el-cascader expand-trigger="hover" :options="options" :props="props" :show-all-levels="false" :change-on-select="true" v-model="editForm.demid">

								</el-cascader>
							</div>
							<!--</el-select>-->
						</el-form-item>
						<el-form-item label="公司">
							<el-select size="small" v-model="editForm.company" placeholder="请选择公司">
								<el-option v-for="com in Company" :label="com.cpyname" :key="com.cpyid" :value="com.cpyid"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="薪水">
							<el-input size="small" v-model="editForm.salary"></el-input>
						</el-form-item>
						<el-form-item label="入职时间">
							<el-col>
								<el-date-picker type="date" placeholder="选择日期" v-model="editForm.hiredate" style="width: 100%;"></el-date-picker>
							</el-col>
						</el-form-item>
					</div>

					<div class="edit_right">
						<el-form-item label="工号" prop="jobnum">
							<el-input size="small" v-model="editForm.jobnum"></el-input>
						</el-form-item>

						<el-form-item label="联系电话">
							<el-input size="small" v-model="editForm.usertel"></el-input>
						</el-form-item>

						<el-form-item label="岗位">
							<el-select size="small" v-model="editForm.postid" placeholder="请选择岗位">
								<el-option v-for='po in Postid' :key="po.postid" :label="po.postname" :value="po.postid"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="直属上级">
							<el-select size="small" filterable remote v-model="editForm.superior" placeholder="请选择直属上级">
								<el-option v-for="sup in Superior" :key="sup.jobnum" :label="sup.username" :value="sup.jobnum"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="级别">
							<el-select size="small" v-model="editForm.roleid" placeholder="请选择级别">
								<el-option v-for="role in Roleid" :key="role.r" :label="role.r" :value="role.r"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="出生年月">
							<el-col>
								<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birthdate" style="width: 100%;"></el-date-picker>
							</el-col>
						</el-form-item>
						<br />
					</div>
					<span class="tshow">{{insertFlag}}</span>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button size="small" @click='closeDialog()'>取消</el-button>
					<el-button size="small" type="primary" class="title" @click="submitForm('editForm');">保存</el-button>
				</div>
			</el-dialog>

			<el-dialog title="修改用户" :visible.sync="dialogFormVisible_x" width="55%">
				<el-form ref="editForm" :model="editForm" :rules="rules">

					<div class="edit_left">
						<el-form-item label="用户姓名" prop="name">
							<el-input size="small" v-model="editForm.name"></el-input>
						</el-form-item>
						<el-form-item label="性别">
							<el-radio label="男" v-model="editForm.sex">男</el-radio>
							<el-radio label="女" v-model="editForm.sex">女</el-radio>
						</el-form-item>
						<el-form-item label="电子邮件">
							<el-input size="small" v-model="editForm.email"></el-input>
						</el-form-item>
						<el-form-item label="所属部门" prop="demid">

							<div class="block">
								<el-cascader expand-trigger="hover" :options="options" :props="props" :show-all-levels="false" :change-on-select="true" v-model="editForm.demid">

								</el-cascader>
							</div>
							<!--</el-select>-->
						</el-form-item>
						<el-form-item label="公司">
							<el-select size="small" v-model="editForm.company" placeholder="请选择公司">
								<el-option v-for="com in Company" :label="com.cpyname" :key="com.cpyid" :value="com.cpyid"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="薪水">
							<el-input size="small" v-model="editForm.salary"></el-input>
						</el-form-item>
						<el-form-item label="入职时间">
							<el-col>
								<el-date-picker type="date" placeholder="选择日期" v-model="editForm.hiredate" style="width: 100%;"></el-date-picker>
							</el-col>
						</el-form-item>
					</div>

					<div class="edit_right">
						<el-form-item label="工号" prop="jobnum">
							<el-input size="small" v-model="editForm.jobnum"></el-input>
						</el-form-item>

						<el-form-item label="联系电话">
							<el-input size="small" v-model="editForm.usertel"></el-input>
						</el-form-item>

						<el-form-item label="岗位">
							<el-select size="small" v-model="editForm.postid" placeholder="请选择岗位">
								<el-option v-for='po in Postid' :key="po.postid" :label="po.postname" :value="po.postid"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="直属上级">
							<el-select size="small" filterable remote  :loading="loading"  reserve-keyword v-model="editForm.superior" placeholder="请选择直属上级">
								<el-option v-for="sup in Superior" :key="sup.jobnum" :label="sup.username" :value="sup.jobnum"></el-option>
							</el-select>
						</el-form-item>
						
						<el-form-item label="级别">
							<el-select size="small" v-model="editForm.roleid" placeholder="请选择级别">
								<el-option v-for="role in Roleid" :key="role.r" :label="role.r" :value="role.r"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="出生年月">
							<el-col>
								<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birthdate" style="width: 100%;"></el-date-picker>
							</el-col>
						</el-form-item>
						<br />
					</div>
					<!--<span class="tshow">{{insertFlag}}</span>-->
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button size="small" @click='closeDialog()'>取消</el-button>
					<el-button size="small" type="primary" class="title" @click="submitFormchange('editForm');">保存</el-button>
				</div>
			</el-dialog>

			<el-dialog title="分配角色" :visible.sync="dialogFormVisible_y" width="30%" id="plog">
				<el-form ref="editForm" :model="editForm" class="pform">
					<el-form-item label="角色" prop="demid">

						<div class="block">
							<el-cascader expand-trigger="hover" :options="optionsT" :props="propsT" :show-all-levels="false" :change-on-select="true" v-model="role">

							</el-cascader>
							<!--</el-select>-->
						</div>
					</el-form-item>

				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button size="small" @click='closeDialog("role")'>取消</el-button>
					<el-button size="small" type="primary" class="title" @click="submitFormchangeS('role');">保存</el-button>
				</div>
			</el-dialog>

		</el-form>

		<el-table :data="users" style="100%" :row-class-name="tableRowClassName" @selection-change="row_click">
			<el-table-column align="center" type="selection" width="50">
			</el-table-column>

			<el-table-column prop="username" align="center" label="用户名" width="100">
			</el-table-column>

			<el-table-column prop="jobnum" align="center" label="工号" width="100">
			</el-table-column>

			<el-table-column prop="usertel" align="center" label="电话号码" width="130">
			</el-table-column>
			<el-table-column prop="post.postname" align="center" label="岗位" width="100">
			</el-table-column>
			<el-table-column prop="department.demname" align="center" label="所属部门" width="80">
			</el-table-column>
			<el-table-column prop="superior" align="center" label="直属上级" width="80">
			</el-table-column>
			<el-table-column prop="email" align="center" label="电子邮件" width="200">
			</el-table-column>
			<el-table-column prop="hiredate" align="center" label="入职时间" width="120">
			</el-table-column>
			<el-table-column prop="birthdate" align="center" label="出生日期" width="120">
			</el-table-column>

			<el-table-column prop="role.rolename" align="center" label="角色" width="100">
			</el-table-column>
			<el-table-column prop="sex" align="center" label="性别" width="80">
			</el-table-column>
			<el-table-column prop="state" align="center" label="状态" width="50">
			</el-table-column>
			<el-table-column label="操作" min-width="200" align="center">
				<template slot-scope="scope">
					<el-button size="mini" @click="hEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" @click="Distribution(scope.$index, scope.row)">分配角色</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block">
			<ul class="pager">
				<li class="previous" @click="Less()">
					<a href="javascript:;"><span aria-hidden="true">&larr;</span> 上一页</a>
				</li>
				<div class="middle">
					<select name="showNumber" @change="Getvalue($event)" class="showNumber">
						<option v-for="item in shownumber" :key="item.value" :value="item.value">{{item.content}} </option>
					</select>
					<div class="show_item">
						{{page}} / {{pages}} &nbsp;&nbsp;&nbsp; 一共有{{totalcount}}条数据
					</div>

					<div class="jump-div">
						<input type="text" v-model="page" class="jump" />
						<button @click="ChangePage()">跳转</button>
					</div>

				</div>
				<li class="p_next" @click="Add()">
					<a href="javascript:;">下一页 <span aria-hidden="true">&rarr;</span></a>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	import { rules } from '../Rules/index.js'
	import qs from 'qs'
	import '@/css/usermessage.css'

	export default {
		data() {
			return {
				shownumber: [{
						'value': 10,
						'content': "每页显示10条数据"
					},
					{
						'value': 1,
						'content': "每页显示3条数据"
					},
					{
						'value': 3,
						'content': "每页显示5条数据"
					},
					{
						'value': 5,
						'content': "每页显示1条数据"
					},
					{
						'value': 15,
						'content': "每页显示15条数据"
					},
				],
				users: [],
				Postid: [], //岗位
				Demid: [], //部门
				Superior: [], //直属上级
				Company: [], //公司
				Roleid: [{
						"r": "高级"
					},
					{
						"r": "中级"
					},
					{
						"r": "初级"
					},
				], //级别
				userName: '',
				userId: '',
				page: 1,
				pages: 1,
				pageCount: 10,
				totalcount: 0,
				Nowid: '',
				NowidT: '',
				//				dialogTableVisible: false,
				dialogFormVisible: false,
				dialogFormVisible_x: false,
				dialogFormVisible_y: false,
				editForm: {
					pid: '',
					name: '',
					jobnum: '',
					sex: '',
					usertel: '',
					email: '',
					postid: '',
					demid: [],
					superior: '',
					company: '',
					roleid: '',
					salary: '',
					hiredate: '',
					birthdate: ''
				},
				Userdeleteid: [],
				rules,
				options: [],
				optionsT: [],
				props: {
					value: 'demid',
					label: 'demname',
					children: 'children'
				},
				propsT: {
					value: 'roleid',
					label: 'rolename',
					children: 'children'
				},
				role: [],
				insertFlag: '',
				formLabelWidth: '100px',
				loading: false
			}
		},
		mounted() {

			this.handleCurrentChange();
		},
		methods: {
			tableRowClassName({ //表格颜色交替  
				row,
				rowIndex
			}) {
				if(rowIndex % 2 == 1) {
					return 'warning-row';
				} else {
					return 'success-row';
				}
				return '';
			},
			handleCurrentChange() { //页数改变时重新请求数据
				axios({
					url: '/user/users',
					method: 'POST',
					data: {
						currPage: this.page,
						page_size: this.pageCount
					} //username usertel address jobnum
				}).then((res) => {
					this.users = res.data.data.data;
					this.pages = res.data.data.totalPage;
					this.totalcount = res.data.data.totalCount;

				})
			},
			Search() { //查询
				axios({
					url: '/user/select',
					method: 'POST',
					data: {
						username: this.userName,
						jobnum: this.userId,
						currPage: this.page,
						page_size: this.pageCount
					} //username usertel address jobnum
				}).then((res) => {
					this.users = res.data.data.data;
					this.pages = res.data.data.totalPage;
					this.totalcount = res.data.data.totalCount;
				});

			},
			Reset() { //重置
				this.userName = '';
				this.userId = '';
				this.Newpage();
			},
			Distribution(index, row) { //分配角色
				this.dialogFormVisible_y = true;
				this.NowidT = row.jobnum;
				axios({
					url: '/user/role',
					method: 'POST',
					data: {
						jobnum: row.jobnum
					} //username usertel address jobnum
				}).then((res) => {

				});
				this.reqDataS();
			},
			reqData() {
				axios({
					url: '/user/getallcom', //公司
					method: 'POST',
					data: {}
				}).then((res) => {
					this.Company = res.data.data;
				});
				axios({
					url: '/user/getalldem', //部门
					method: 'POST',
					data: {}
				}).then((res) => {
					let originData = res.data.data;
					for(let i = 0; i < 2; i++) {
						for(let j = 0; j < 2; j++) {
							let chi = originData[0].children[i].children[j];
							if(chi.children.length == 0) {
								delete chi.children;
							}
						}
					};
					this.options = originData;
				});
				axios({
					url: '/user/getallpo', //岗位
					method: 'POST',
					data: {}
				}).then((res) => {
					this.Postid = res.data.data;
				});
			},
			reqDataA() {
				axios({
					url: '/user/getall', //直属上级
					method: 'POST',
					data: {}
				}).then((res) => {
					this.Superior = res.data.data;
				});
				this.reqData();
			},
			reqDataC() {
				axios({
					url: '/user/getsup', //直属上级
					method: 'POST',
					data: {
						jobnum: this.Nowid
					}
				}).then((res) => {
					this.Superior = res.data.data;
				});
				this.reqData();
			},
			reqDataS() {
				axios({
					url: '/user/getallro', //部门
					method: 'POST',
					data: {}
				}).then((res) => {
					let originData = res.data.data;

					for(let i = 0; i < 2; i++) {
						for(let j = 0; j < 2; j++) {
							let chi = originData[0].children[i].children[j];
							if(chi.children.length == 0) {
								delete chi.children;
							}
						}
					};
					this.optionsT = originData;
					//					console.log()
				});
			},
			clearData() {
				this.editForm.pid = '';
				this.editForm.name = '';
				this.editForm.jobnum = '';
				this.editForm.sex = '';
				this.editForm.usertel = '';
				this.editForm.email = '';
				this.editForm.postid = '';
				this.editForm.demid = [];
				this.editForm.superior = '';
				this.editForm.company = '';
				this.editForm.roleid = '';
				this.editForm.salary = '';
				this.editForm.hiredate = '';
				this.editForm.birthdate = '';
				this.role = [];
			},
			handleEdit() { //添加
				this.clearData();
				this.dialogFormVisible = true;
				this.reqDataA();

			},
			hEdit(index, row) {    //修改
				this.dialogFormVisible_x = true;
				this.Nowid = row.jobnum;
				axios({
					url: '/user/before',
					method: 'POST',
					data: {
						jobnum: row.jobnum
					} //username usertel address jobnum
				}).then((res) => {
					this.editForm.pid = res.data.data.id;
					this.editForm.name = res.data.data.username;
					this.editForm.jobnum = res.data.data.jobnum;
					this.editForm.sex = res.data.data.sex;
					this.editForm.usertel = res.data.data.usertel;
					this.editForm.email = res.data.data.email;
					this.editForm.postid = res.data.data.postid;
					this.editForm.demid.push(res.data.data.demid);
					this.editForm.superior = res.data.data.superior;
					this.editForm.company = res.data.data.cpyid;
					this.editForm.roleid = res.data.data.roleid;
					this.editForm.salary = res.data.data.salary;
					this.editForm.hiredate = res.data.data.hiredate;
					this.editForm.birthdate = res.data.data.birthdate;
				});

				this.reqDataC();
			},
			row_click(selection) { //复选框状态改变
				//				this.Userdeleteid.push(selection[0].jobnum);
				this.Userdeleteid = [];
				for(let i = 0; i < selection.length; i++) {
					this.Userdeleteid.push(selection[i].jobnum);
				}
				console.log(this.Userdeleteid);
			},
			Lessuser() { // 删除
				this.$confirm('是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(
					() => {
						axios({
							url: '/user/delete',
							method: 'POST',
							data: qs.stringify({
								jobnum: this.Userdeleteid
							}, {
								indices: false
							})
						}).then((res) => {
							if(res.data.success == true) {
								this.$message({
									type: 'success',
									message: '删除成功'
								});
								this.Newpage();
							} else {
								this.$message({
									type: 'info',
									message: '删除失败'
								});
							}

						})

					}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			Newpage() { //跳转第一页
				this.page = 1;
				axios({
					url: '/user/users',
					method: 'POST',
					data: {
						currPage: this.page,
						page_size: this.pageCount
					} //username usertel address jobnum
				}).then((res) => {
					this.users = res.data.data.data;
					this.pages = res.data.data.totalPage;
					this.totalcount = res.data.data.totalCount;
				})
			},
			showNumber(number) { //第一个 最后一页不可再跳
				alert(number);
			},
			Getvalue(event) { //每页显示的数据条数   
				this.pageCount = event.target.value;
				axios({
					url: '/user/users',
					method: 'POST',
					data: {
						currPage: this.page,
						page_size: this.pageCount
					}
				}).then((res) => {
					this.users = res.data.data.data;
					this.pages = res.data.data.totalPage;
					this.totalcount = res.data.data.totalCount;
				})
			},
			submitForm(editData) { //用户 添加 提交

				this.$refs[editData].validate((valid) => {
					if(valid) {
						axios({
							url: '/user/insert',
							method: 'POST',
							data: {
								username: this.editForm.name,
								jobnum: this.editForm.jobnum,
								usertel: this.editForm.usertel,
								cpyid: this.editForm.company,
								demid: this.editForm.demid[2],
								postid: this.editForm.postid,
								email: this.editForm.email,
								superior: this.editForm.superior,
								birthdate: this.editForm.birthdate,
								hiredate: this.editForm.hiredate,
								sex: this.editForm.sex,
								level: this.editForm.roleid,
								salary: this.editForm.salary
							} //username usertel address jobnum
						}).then((res) => {
							alert(res.data.message);
							if(res.data.success == true) {
								this.dialogFormVisible = false;
								this.handleCurrentChange();
								this.clearData();
							} else {}
						});
					} else {
						return false;
					}
				});

			},
			submitFormchange(editData) {
				this.$refs[editData].validate((valid) => {
					if(valid) {
						axios({
							url: '/user/update',
							method: 'POST',
							data: {
								id: this.editForm.pid,
								username: this.editForm.name,
								jobnum: this.editForm.jobnum,
								usertel: this.editForm.usertel,
								cpyid: this.editForm.company,
								demid: this.editForm.demid[2],
								postid: this.editForm.postid,
								email: this.editForm.email,
								superior: this.editForm.superior,
								birthdate: this.editForm.birthdate,
								hiredate: this.editForm.hiredate,
								sex: this.editForm.sex,
								level: this.editForm.roleid,
								salary: this.editForm.salary
							} //username usertel address jobnum
						}).then((res) => {
							alert(res.data.message);
							if(res.data.success == true) {
								this.dialogFormVisible_x = false;
								this.handleCurrentChange();
								this.clearData();
							} else {

							}
						});
					} else {
						return false;
					}
				});
			},
			submitFormchangeS(role) {
				axios({
					url: '/user/uprole',
					method: 'POST',
					data: {
						roleid: this.role[2],
						jobnum: this.NowidT
					} //username usertel address jobnum
				}).then((res) => {
					alert(res.data.message);
					if(res.data.success == true) {
						this.dialogFormVisible_y = false;
						this.handleCurrentChange();
						this.clearData();
						console.log(this.role)
					} else {

					}
				});
			},
			closeDialog() { //用户添加框关闭
				this.clearData();
			},

			Add() { //下一页
				if(this.page == this.pages) {
					alert("最后一页了");
				} else {
					this.page++;
					axios({
						url: '/user/users',
						method: 'POST',
						data: {
							currPage: this.page,
							page_size: this.pageCount
						} //username usertel address jobnum
					}).then((res) => {
						this.users = res.data.data.data;
						this.pages = res.data.data.totalPage;
						this.totalcount = res.data.data.totalCount;
					})
				}
			},
			Less() { //上一页
				if(this.page == 1) {
					alert("这是第一页");
				} else {
					this.page--;
					axios({
						url: '/user/users',
						method: 'POST',
						data: {
							currPage: this.page,
							page_size: this.pageCount
						}
					}).then((res) => {
						this.users = res.data.data.data;
						this.pages = res.data.data.totalPage;
						this.totalcount = res.data.data.totalCount;
					})
				}

			},
			ChangePage() { //改变当前页
				axios({
					url: '/user/users',
					method: 'POST',
					data: {
						currPage: this.page,
						page_size: this.pageCount
					}
				}).then((res) => {
					this.users = res.data.data.data;
					this.pages = res.data.data.totalPage;
					this.totalcount = res.data.data.totalCount;
				})
			}
		}
	}
</script>